{% extends "base.html" %}

{% block nav %}
  {% include "stock/nav.html" %}
{% endblock %}

{% block subnav %}
  {% if quote %}
    {{ quote }}
    <ul>
      <li>Snapshot Summary</li>
      <li>News</li>
      <li>Financials</li>
      <li><a href="/stock/{{ quote }}/price">Historical prices</a></li>
      <li><a href="/stock/{{ quote }}/chart">Technical Chart</a></li>
      <li>VI Statistics</li>
      <li>Profile</li>
    </ul>  
  {% endif %} 
{% endblock %}

{% block toolbar %}
Simulation
{% endblock %}

{% block addition_header %}
  <script src="/static/amcharts/amstock.js" type="text/javascript"></script>
  <link rel="stylesheet" href="/static/amcharts/style.css" type="text/css">  

	<script type="text/javascript">
			AmCharts.ready(function () {
				createStockChart();
			});

      var chartData = [
      {% for data in accountMatrix %}
        {
          date:new Date({{ data.Date|date:"Y" }},{{ data.Date|date:"m" }}-1,{{ data.Date|date:"d" }}),
          cash:{{ data.cash }},
          hold:{{ data.hold }},
          total:{{ data.total }}
          
        }{% if not forloop.last %},{% endif %}
      {% endfor %}
      ]; 

			var chart;

			function createStockChart() {
				chart = new AmCharts.AmStockChart();
				chart.pathToImages = "/static/amcharts/images/";
        chart.panEventsEnabled = true;
				// DATASETS //////////////////////////////////////////
				var dataSet = new AmCharts.DataSet();
				dataSet.fieldMappings = [{
					fromField: "cash",
					toField: "cash"
				}, {
					fromField: "hold",
					toField: "hold"
				}, {
					fromField: "total",
					toField: "total"
				}];
				dataSet.dataProvider = chartData;
				dataSet.categoryField = "date";

				// set data sets to the chart
				chart.dataSets = [dataSet];

				// PANELS ///////////////////////////////////////////                                                  
				// first stock panel
				var stockPanel1 = new AmCharts.StockPanel();
				//stockPanel1.showCategoryAxis = false;
				stockPanel1.title = "Capital";
				stockPanel1.panEventsEnabled = true;				

				// graph of first stock panel
				var graph1 = new AmCharts.StockGraph();
        graph1.title = "Cash";
				graph1.valueField = "cash";
        graph1.type = "line";
        graph1.lineThickness = 2;
        graph1.bullet = "round";
        graph1.bulletSize = 1;        
        graph1.useDataSetColors = false;
				stockPanel1.addStockGraph(graph1);
        
				// graph of first stock panel
				var graph2 = new AmCharts.StockGraph();
        graph2.title = "Hold";
				graph2.valueField = "hold";
        graph2.type = "line";
        graph2.lineThickness = 2;
        graph2.bullet = "round";
        graph2.bulletSize = 1;   
        graph2.useDataSetColors = false;
				stockPanel1.addStockGraph(graph2);

				// graph of first stock panel
				var graph3 = new AmCharts.StockGraph();
        graph3.title = "Total";
				graph3.valueField = "total";
        graph3.type = "line";
        graph3.lineThickness = 2;
        graph3.bullet = "round";
        graph3.bulletSize = 1;   
        graph3.useDataSetColors = false;
				stockPanel1.addStockGraph(graph3);        

				// create stock legend                
				var stockLegend1 = new AmCharts.StockLegend();
				stockLegend1.markerType = "square";
				stockLegend1.markerSize = 16;
        stockLegend1.switchType = "x";
				stockLegend1.valueTextRegular = undefined;
				stockLegend1.valueWidth = 50;        
				stockPanel1.stockLegend = stockLegend1;

				// set panels to the chart
				chart.panels = [stockPanel1];


				// OTHER SETTINGS ////////////////////////////////////
				var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
				scrollbarSettings.graph = graph3;
				scrollbarSettings.updateOnReleaseOnly = true;
				chart.chartScrollbarSettings = scrollbarSettings;

				var cursorSettings = new AmCharts.ChartCursorSettings();
				cursorSettings.valueBalloonsEnabled = true;
				chart.chartCursorSettings = cursorSettings;


				// PERIOD SELECTOR ///////////////////////////////////
				var periodSelector = new AmCharts.PeriodSelector();
				periodSelector.periods = [{
					period: "MM",
					count: 1,
					label: "1 month"
				}, {
					period: "MM",
					count: 3,
					label: "3 month"
				}, {
					period: "MM",
					count: 6,
					label: "6 month"
				}, {
					period: "YYYY",
					count: 1,
					label: "1 year"
				}, {
					period: "MAX",
					label: "MAX"
				}];
				chart.periodSelector = periodSelector;


				var panelsSettings = new AmCharts.PanelsSettings();
				panelsSettings.usePrefixes = true;
				panelsSettings.panEventsEnabled = true;
				chart.panelsSettings = panelsSettings;


				// EVENTS
        /*
        {% for cash,data in account.orderHistory %}
          var e{{ forloop.counter0 }} = {
            date: new Date({{ data.Date|date:"Y" }}, {{ data.Date|date:"m" }}-1, {{ data.Date|date:"d" }}),
            type: "sign",
            graph: graph3,
            text: {% if data.side == "buy" %}"B"{% else %}"S"{% endif %},
            description: "{{ data.side}} {{ data.quote }} - {{ data.share }}"
          };
        {% endfor %}
        
				dataSet.stockEvents = [{% for data in account.orderHistory %}e{{ forloop.counter0 }}{% if not forloop.last %},{% endif %}{% endfor %}];
        */

				chart.write('chartdiv');
			}


	  
 
			
		</script>

{% endblock %}

{% block content %}
<div style="display:block">
<strong>Stock : </strong>{% for quote in quoteList %}{{ quote }}{% if not forloop.last %}, {% endif %}{% endfor %}
</div>
<br />
<br />------------------------------------------------------------<br />
<strong>Strategy : </strong><br />
Buy at EMA10 &gt; EMA60<br />
Sell at EMA10 &lt; EMA30<br />
<br />
<br />------------------------------------------------------------<br />
<strong>Last Port:</strong><br />
  {% for key,value in account.holdings.items %}
    quote:{{ key }}
    share:{{ value.0 }}
    price:{{ value.1 }}
    <br />
  {% endfor %}
<br />
  
<div id="chartdiv" style="width:100%; height:500px;margin-bottom:10px;"></div>
  
<br />------------------------------------------------------------<br />

{% endblock %}